<template>
	<view class="container">
		<uni-nav-bar title="上门服务" @clickLeft="goHome" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true">
		</uni-nav-bar>
		
		<view class="top-title-view">
			<view class="tab">
				<view :class="tabIndex===index?'item active-color':'item'" v-for="(item,index) in tabList" :key="index"
					@click="selectTab(index)">
					{{item}}
				</view>
			</view>
		</view>
		
		<view class="content">
			<scroll-view class="scrollView" scroll-y="true" @scrolltolower="handleScrolltolowerone()"
				:style="{height: setcollapseheight() - 50 + 'px'}" v-if="dataList.length>0">
				<view class="item" v-for="(item,index) in dataList" :key="index">
					<view @click="goInfo(item)">
						<view class="nickName">
							<view class="left">
								预约专家：{{item.expertName}}
							</view>
						</view>
						<view class="time">
							预约时间：{{item.startDateTime}}
						</view>
						<view class="address" style="display: flex;">
							地址：
							<view v-if="addressList[item.provinceId].name">
								{{addressList[item.provinceId].name}}
							</view>
							<view v-if="addressList[item.provinceId].name && addressList[item.provinceId].city[item.cityId]">
								{{addressList[item.provinceId].city[item.cityId].name}}
							</view>
							<view v-if="addressList[item.provinceId].name && addressList[item.provinceId].city[item.cityId] && addressList[item.provinceId].city[item.cityId].area[item.areaId]">
								{{addressList[item.provinceId].city[item.cityId].area[item.areaId].name}}
							</view>
							{{item.address}}
						</view>
						<view class="orderName">
							预约人：{{item.contact}}
						</view>
						<view class="phone">
							联系方式：{{item.contactMethod}}
						</view>
						<view class="remark">
							问题描述：{{item.content}}
						</view>
						<view class="ticket" v-show="(item.status === 'COMPLETE_WAIT_FOR_USER_MAKE_SURE' && tabIndex === 2)">
							服务单
						</view>
						<view class="ticket" v-show="(item.status === 'CANCEL_WAIT_FOR_EXPERT_MAKE_SURE' && tabIndex === 2)">
							取消单
						</view>
						<view v-show="tabIndex === 4">
							<view class="ticket" v-if="item.status === 'CANCEL'">
								取消单
							</view>
							<view class="ticket" v-else>
								未接单
							</view>
						</view>
					</view>
					<view class="operate">
						<view class="left">
							<view class="lookPic" @click="lookPic(item)">
								查看图片
							</view>
							<view class="lookVid" @click="lookVid(item)">
								查看视频
							</view>
						</view>
						<view class="right">
							<view v-if="tabIndex === 0" style="display: flex;">
								<u-button class="operate-btn" type="plain" text="接单" size="mini" @click="orderReceive(item.doorToDoorId)">
								</u-button>
								<u-button class="operate-btn red" type="plain" text="不接单" size="mini" @click="refuseOrder(item.doorToDoorId)">
								</u-button>
							</view>
							<view v-else-if="tabIndex === 1" style="display: flex;">
								<u-button class="operate-btn red" type="plain" text="取消服务" size="mini" @click="cancelService(item.doorToDoorId)">
								</u-button>
								<u-button class="operate-btn" type="plain" text="完成服务" size="mini" @click="finishedService(item.doorToDoorId)">
								</u-button>
							</view>
							<view v-else-if="tabIndex === 2" style="display: flex;">
								<u-button class="operate-btn" type="plain" text="同意" size="mini" @click="agree(item.doorToDoorId)">
								</u-button>
								<u-button class="operate-btn red" type="plain" text="不同意" size="mini" @click="disagree(item.doorToDoorId)">
								</u-button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view v-else>
				<view class="blank">
					<image src="@/static/blank.png" mode=""></image>
					<view class="nodata">
						暂无数据
					</view>
				</view>
			</view>
		</view>
		
		<u-popup :show="showImg" mode="center" width="100%" height="100%" @close="showImg=false">
			<view class="showImg" v-for="(item,index) in showImgUrls" :key="index">
				<image :src="`${agrServiceUrl}common/file/upDown/view?fileId=${item.imgId}&moduleType=XG_ORGANIZATION&upDownType=FTP`" mode="widthFix"></image>
			</view>
		</u-popup>
		<u-popup :show="showVid" mode="center" width="100%" height="100%" @close="showVid=false">
			<MyVideo :videoUrl="showVidUrl"
				style="width: 100%;min-width: 600rpx;height: 420rpx;" class="video"></MyVideo>
		</u-popup>
		<u-popup class="popUp" :show="popCancelFlag" :round="10" mode="center" width="100%" height="100%"
			:closeable="false" @close="popCancelFlag=false">
			<view class="popUpOperate">
				<view class="left" @click="popCancelFlag=false">
					取消
				</view>
				<view class="center">
					取消原因
				</view>
				<view class="right" @click="popConfirm1">
					确认
				</view>
			</view>
			<view class="contents">
				<textarea type="textarea" v-model="popData.content" placeholder="点击输入取消原因"
					style="background-color: #fff;box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);border-radius: 16rpx;width: 100%;padding: 10rpx;">
				</textarea>
			</view>
		</u-popup>
		<u-popup class="popUp" :show="popReceiveFlag" :round="10" mode="center" width="100%" height="100%"
			:closeable="false" @close="popReceiveFlag=false">
			<view class="popUpOperate">
				<view class="left" @click="popReceiveFlag=false">
					取消
				</view>
				<view class="center">
					取消原因
				</view>
				<view class="right" @click="popConfirm2">
					确认
				</view>
			</view>
			<view class="contents">
				<textarea type="textarea" v-model="popData.receiveRemark" placeholder="点击输入取消原因"
					style="background-color: #fff;box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);border-radius: 16rpx;width: 100%;padding: 10rpx;">
				</textarea>
			</view>
		</u-popup>
		<u-popup class="popUp" :show="popConfirmFlag" :round="10" mode="center" width="100%" height="100%"
			:closeable="false" @close="popConfirmFlag=false">
			<view class="popUpOperate">
				<view class="left" @click="popConfirmFlag=false">
					取消
				</view>
				<view class="center">
					完成服务
				</view>
				<view class="right" @click="popConfirm3">
					确认
				</view>
			</view>
			<view class="contents">
				<textarea type="textarea" v-model="popData.remark" placeholder="点击输入完成原因"
					style="background-color: #fff;box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);border-radius: 16rpx;width: 100%;padding: 10rpx;">
				</textarea>
			</view>
		</u-popup>
		
		<bottomTabar></bottomTabar>
	</view>
</template>

<script>
	import serviceApi from '@/api/socialized-servce/specialist-consultation/order/index.js'
	import bottomTabar from '../../components/bottom-tabar/index.vue'
	import MyVideo from '@/subPage1/components/myVideo/myVideo.vue'
	import { addressList } from '@/subPage1/plugins/address.js'
	import { sagrServiceUrl} from '@/config/baseUrl.js'
	export default {
		components: {
			bottomTabar,
			MyVideo
		},
		data() {
			return {
				sagrServiceUrl,
				addressList: addressList,
				doorToDoorId: '',
				status: 'WAIT_FOR_ORDER',
				page: 1,
				size: 10,
				total: '',
				showImg: false,
				showImgUrls: [],
				showVidUrl: '',
				showVid: false,
				userTyp: '',
				tabList: ['待接单', '待服务', '待确认', '已完成', '已取消'],
				tabIndex: 0,
				dataList: [],
				popData: {
					content: '',
					receiveRemark: '',
					remark: ''
				},
				popCancelFlag: false,
				popReceiveFlag: false,
				popConfirmFlag: false,
				fileList: [],
				pictureIdList: [],
				fileList2: [],
				collectData: {
					invitationTypeId: 0,
					invitationTitle: '',
					invitationContent: '',
					imgList: [],
					vedioList: []
				},
			}
		},
		created() {
			if (uni.getStorageSync('tabIndex')) {
				this.tabIndex = uni.getStorageSync('tabIndex')
				this.selectTab(this.tabIndex)
				return
			} else {
				this.waitOrderReceiving('WAIT_FOR_ORDER')
			}
		},
		onLoad() {

		},
		methods: {
			goHome() {
				uni.reLaunch({
					url: '/pages/socialized-service/selection-system/selection-system'
				})
			},
			selectTab(index) {
				this.dataList = []
				this.tabIndex = index
				uni.setStorageSync('tabIndex', index)
				if (index === 0) {
					// 待接单
					this.page = 1
					this.status = 'WAIT_FOR_ORDER'
					this.waitOrderReceiving('WAIT_FOR_ORDER')
				} else if (index === 1) {
					// 待服务
					this.page = 1
					this.status = 'WAIT_FOR_SERVICE'
					this.waitOrderReceiving('WAIT_FOR_SERVICE')
				} else if (index === 2) {
					// 待确认
					this.page = 1
					this.status = 'CANCEL_WAIT_FOR_EXPERT_MAKE_SURE'
					this.waitOrderReceiving('CANCEL_WAIT_FOR_EXPERT_MAKE_SURE')
				} else if (index === 3) {
					// 已完成
					this.page = 1
					this.status = 'COMPLETE'
					this.waitOrderReceiving('COMPLETE')
				} else if (index === 4) {
					// 已取消
					this.page = 1
					this.status = 'CANCEL'
					this.waitOrderReceiving('CANCEL')
				}
			},
			async waitOrderReceiving(status) {
				let params = {
					page: this.page,
					size: this.size,
					condition: {
						status: status,
						serviceProviderNo: uni.getStorageSync('serviceProviderNo'),
						expertFlag: true
					}
				}
				let res = await serviceApi.queryMyOrderList(params)
				if (res.code === 200) {
					let arr = res.data.content
					this.total = res.data.totalElements
					this.dataList = [...this.dataList,...arr]
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			onPullDownRefresh() {
				setTimeout(function() {
					uni.stopPullDownRefresh()
				}, 1000)
			},
			handleScrolltolowerone() {
				if(this.total > this.dataList.length) {
					this.page++
					this.waitOrderReceiving(this.status)
				}
			},
			setcollapseheight() {
				let winHeight = 0
				let topheightone = uni.upx2px(136)
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				})
				let oldHeight = uni.upx2px(136)
				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			lookPic(e) {
				this.showImgUrls =[]
				if(e.imgList.length > 0) {
					this.showImg = true
					this.showImgUrls = e.imgList
				} else {
					uni.showToast({
						title: '图片不存在',
						icon: 'none'
					})
				}
			},
			lookVid(e) {
				this.showVidUrl = ''
				if(e.videoList.length > 0) {
					this.showVid = true
					this.showVidUrl = `${sagrServiceUrl}common/file/upDown/videoView?fileId=${e.videoList[0].videoId}&moduleType=XG_ORGANIZATION&upDownType=FTP`
				} else {
					uni.showToast({
						title: '视频不存在',
						icon: 'none'
					})
				}
			},
			async orderReceive(id) {
				console.log('专家接单', id);
				let params = {
					doorToDoorId: id,
					operation: true
				}
				let res = await serviceApi.expertReceiveOrder(params)
				if (res.code === 200) {
					uni.showToast({
						title: '接单成功',
						icon: 'none'
					})
					this.selectTab(1)
				}
			},
			refuseOrder(id) {
				this.popReceiveFlag = true
				this.doorToDoorId = id
				this.popData.receiveRemark = ''
			},
			cancelService(id) {
				this.doorToDoorId = id
				this.popCancelFlag = true
				this.popData.content = ''
			},
			async finishedService(id) {
				this.doorToDoorId = id
				this.popConfirmFlag = true
				this.popData.remark = ''
			},
			async popConfirm1() {
				if(this.popData.content) {
					this.popCancelFlag = false
					let params = {
						doorToDoorId: this.doorToDoorId,
						operation: false,
						remark: this.popData.content
					}
					let res = await serviceApi.expertCancelService(params)
					if (res.code === 200) {
						uni.showToast({
							title: '取消服务成功',
							icon: 'none'
						})
						this.selectTab(1)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请输入取消服务原因',
						icon: 'none'
					})
				}
			},
			async popConfirm2() {
				if (this.popData.receiveRemark) {
					this.popReceiveFlag = false
					let params = {
						doorToDoorId: this.doorToDoorId,
						operation: false,
						remark: this.popData.receiveRemark
					}
					let res = await serviceApi.expertReceiveOrder(params)
					if (res.code === 200) {
						uni.showToast({
							title: '不接单成功',
							icon: 'none'
						})
						this.selectTab(4)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请输入拒绝描述',
						icon: 'none'
					})
				}
			},
			async popConfirm3() {
				if(this.popData.remark) {
					this.popConfirmFlag = false
					let params = {
						doorToDoorId: this.doorToDoorId,
						remark: this.popData.remark
					}
					let res = await serviceApi.expertConfirmService(params)
					if(res.code === 200 ){
						uni.showToast({
							title: '服务确认完成，请耐心等待用户确认',
							icon: 'none'
						})
						this.selectTab(1)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请输入服务完成描述',
						icon: 'none'
					})
				}
			},
			async agree(id) {
				let params = {
					doorToDoorId: id,
					operation: true
				}
				let res = await serviceApi.expertConfirmUserCancel(params)
				if(res.code === 200) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					this.selectTab(2)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async disagree(id) {
				let params = {
					doorToDoorId: id,
					operation: false
				}
				let res = await serviceApi.expertConfirmUserCancel(params)
				if(res.code === 200) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					this.selectTab(2)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'error'
					})
				}
			},
			goInfo(e) {
				if (this.tabIndex === 2 || this.tabIndex === 3 || this.tabIndex === 4) {
					uni.setStorageSync('doorToDoorInfo',e)
					uni.navigateTo({
						url: `/subPage1/socialized-service/specialist-consultation/user-module/door-service/service-info/service-info?tabIndex=${this.tabIndex}&type=expert`
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F5F6FA;

		.top-title-view {
			position: fixed;
			width: 692rpx;
			height: 58rpx;
			margin-top: 20rpx;
			padding: 0 32rpx;
			z-index: 99;

			.tab {
				display: flex;
				width: 100%;
				height: 100%;
				background-color: #E2E2E2;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				overflow: hidden;

				.item {
					height: 100%;
					width: 50%;
					background-color: #E2E2E2;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #818181;
					text-align: center;
					line-height: 58rpx;
				}

				.active-color {
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					color: #fff;
					background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);
				}
			}
		}

		.content {
			padding: 0 40rpx;
			margin-top: 114rpx;
			
			.blank {
				position: absolute;
				width: 100%;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			
				image {
					width: 200rpx;
					height: 200rpx;
				}
			
				.nodata {
					margin-top: 20rpx;
				}
			}

			.item {
				position: relative;
				font-size: 30rpx;
				border-bottom: 2rpx solid #ccc;
				background-color: #fff;
				padding: 15rpx;
				padding-bottom: 30rpx;

				.nickName {
					display: flex;
					justify-content: space-between;

					.left {
						font-size: 36rpx;
						font-weight: 700;
					}

					.right {
						font-size: 36rpx
					}
				}
				
				.ticket {
					position: absolute;
					font-weight: 700;
					right: 0;
					top: 50%;
					transform: translateY(-50%) rotate(40deg);
				}

				.operate {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;

					.left {
						display: flex;
						color: #169bd5;

						.lookPic {
							margin-right: 20rpx;
						}
					}
					.right {
						.operate-btn {
							border: 1px solid #000;
							padding: 10rpx;
							border-radius: 22rpx;
							margin-right: 20rpx;
							&:last-child {
								margin-right: 0;
							}
							&.red {
								border: 1px solid #fd9090;
								color: #fd9090;
							}
						}
					}
				}
			}
		}
	}

	.popUp {
		/deep/.u-popup__content {
			position: relative;
			width: 100%;
			transform: translateY(-20rpx);
			.popUpOperate {
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				padding: 0 20rpx;
				border-bottom: 1px solid #ccc;
			
				.left,
				.right {
					color: #0079fe;
				}
			
				.center {
					font-weight: 700;
				}
			}
			
			.contents {
				padding: 0 20rpx;
				margin-top: 20rpx;
				height: 350rpx;
			}
			
			.footer {
				display: flex;
				margin-top: 40rpx;
				padding: 0 20rpx;
				padding-bottom: 20rpx;
				color: #0079fe;
			
				.left {
					margin-right: 40rpx;
				}
			}
		}
	}

	.upLoad-pic {
		display: flex;
		padding-left: 34rpx;
		margin-top: 22rpx;

		.picture {
			margin-top: 20rpx;
			padding: 0 0 20rpx 0;
			position: relative;
			width: 168rpx;
			height: 52rpx;
			margin-right: 10rpx;
			overflow: hidden;

			::v-deep .u-upload {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: transparent !important;
				z-index: 999;
			}

			::v-deep .u-upload__button {
				background-color: transparent;
			}

			.title {
				width: 100%;
				display: flex;
				align-items: center;
				height: 100%;
				font-size: 24rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #0079fe;
				justify-content: center;
				align-items: center;
				pointer-events: none;

				image {
					width: 27rpx;
					height: 21rpx;
				}
			}

			.title1 {
				color: #0079fe;
				background: #FFFFFF;
				pointer-events: none;
			}
		}
	}

	::v-deep .u-upload__button {
		display: block;
		width: 100% !important;
		height: 116rpx !important;
		background: #BEDFFF;
	}

	::v-deep .u-icon__icon {
		display: none;
	}


	::v-deep .u-upload__wrap__preview__image {
		display: none;
		margin: 0;
	}

	::v-deep .u-upload__wrap__preview__other {
		display: none;
		width: 110rpx;
		height: 114rpx;
	}
	/deep/._iframe {
		width: 100%!important;
		height: 100%!important;
	}
	
	/deep/ .u-button__text {
		font-size: 30rpx!important;
	}
</style>